<template>
  <div class="index">
    <!-- 准备容器，显示图表 -->
    <div class="charts" id="main1"></div>
    <div class="charts" id="main2"></div>
  </div>
</template>

<script>
// 引入 ECharts 注意新版本的区别
// import * as echarts from "echarts";
import * as echarts from 'echarts/lib/echarts';
import { PieChart, BarChart } from 'echarts/charts';
import { TooltipComponent,LegendComponent, TitleComponent,GridComponent  } from 'echarts/components';
echarts.use([TitleComponent, TooltipComponent, LegendComponent,PieChart,BarChart,GridComponent ]);
export default {
  data() {
    return {
      option: {},
    };
  },
  created() {
    this.option = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById("main1"));
    var myChart2 = echarts.init(document.getElementById("main2"));
    // 指定图表的配置项和数据,数据在data中
    let option2 = {
      title: {
        text: "某站点用户访问来源",
        subtext: "纯属虚构",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "搜索引擎" },
            { value: 735, name: "直接访问" },
            { value: 580, name: "邮件营销" },
            { value: 484, name: "联盟广告" },
            { value: 300, name: "视频广告" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(this.option);
    myChart2.setOption(option2)
  },
};
</script>

<style>
.index .charts {
  width: 400px;
  height: 400px;
  float: left;
  margin-left: 20px;
}
</style>